<template>
	<!-- 登录弹窗 -->
	<view v-if="showLoginModal" class="login-modal">
	    <view class="login-modal-content">
	        <!-- 弹窗顶部图片 -->
	        <image src="../../static/img/marriageHelp/love_login.webp" class="login-image" mode="aspectFill">
	        </image>
	        <!-- 文本描述 -->
	        <view class="login-text">
	            <text>登录月娘婚恋、建立征婚档案</text>
	            <text>只征婚 不交友</text>
	            <text>及时收发消息，更快脱单</text>
	        </view>
	
	        <!-- 微信小程序登录按钮 -->
	        <!-- 分离为两个按钮，首先获取用户信息 -->
	        <!-- <button open-type="getUserInfo" @getuserinfo="wechatLogin" class="login-button">一键登录获取用户信息</button> -->
	        <button open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber"
	            class="login-button">一键登录获取用户信息和手机号</button>
	        <!-- 然后获取用户手机号码 -->
	
	        <!-- 其他登录选项 -->
	        <view class="other-login" @click="phoneLogin">其他手机号码登录</view>
	
	        <!-- 用户协议与隐私协议 -->
	        <view class="agreement">
	            <checkbox-group @change="onAgreeTermsChange">
	                <checkbox value="agree" :checked="agreeTerms" class="agreement-checkbox" />
	                <text>阅读同意并月娘</text>
	                <text class="agreement-link" @click="openUserAgreement">《用户协议》</text>
	                <text class="agreement-link" @click="openPrivacyPolicy">《隐私协议》</text>
	            </checkbox-group>
	        </view>
	
	        <!-- 稍后再说选项 -->
	        <view class="later-option" @click="closeLoginModal">稍后再说</view>
	    </view>
	</view>
</template>

<script>
import cfg from '@/common/config.js'
	export default{
		props: {
			showLogin: true
		},
		data(){
			return{
				agreeTerms: false,     // 用户是否同意协议
				showLoginModal: this.showLogin
			}
		},
		methods: {
		    // 当 checkbox 状态改变时调用
		    onAgreeTermsChange(event) {
		        // event.detail.value 是一个包含所有被选中的 checkbox 的 value 数组
		        this.agreeTerms = event.detail.value.includes('agree');
		    },
		    // 打开用户协议
		    openUserAgreement() {
		        uni.navigateTo({
		            url: "/pages/userAgreement/userAgreement"
		        });
		    },
		    // 打开隐私协议
		    openPrivacyPolicy() {
		        uni.navigateTo({
		            url: "/pages/privacyPolicy/privacyPolicy"
		        });
		    },
		    // 微信授权登录，获取用户信息
		    handleGetPhoneNumber(e) {
		        var t = this
		        if (e.detail.errMsg === "getPhoneNumber:ok" && this.agreeTerms) {
		            let phoneCode = e.detail.code;
		            console.log(e);
		
		            // 获取登录凭证
		            uni.login({
		                success: (res) => {
		                    if (res.code) {
		                        this.loginCode = res.code;
		                        t.$api.req(`/member/auth/weixin-mini-app-login`,{
		                            // type: '34',
		                            // code: this.loginCode,
		                            phoneCode: phoneCode,
		                            loginCode: this.loginCode,
		                            state: 'default' // 根据需求设置 state 值
		                        },'POST',"JSON",false).then(res => {
		                            console.log(res);
		
		                            if (res.data) {
		                                const userData = res.data; // 提取data部分
		                                t.f.storage('userToken',userData.accessToken)
		                                t.f.storage('user_data',userData)
		                                t.$api.req(`/dating/member/get`,{
		                                    id: userData.userId
		                                },'POST',"JSON",false).then(res1 => {
		                                    console.log(res1);
		                                    if (res1.data) {
		                                    }
		                                });
		                                this.showLoginModal = false; // 关闭登录弹窗
		                            }
		                        });
		                        // 将 loginCode 和 phoneCode 发送到后端接口
		                        // uni.request({
		                        //     url: 'https://www.liujianggongyi.site/app-api/member/auth/weixin-mini-app-login',
		                        //     method: 'POST',
		                        //     data: {
		                        //         phoneCode: phoneCode,
		                        //         loginCode: this.loginCode,
		                        //         state: 'default' // 根据需求设置 state 值
		                        //     },
		                        //     header: {
		                        //         'Content-Type': 'application/json', // 设置请求体的内容类型
		                        //         'tenant-id': '1' // 添加 tenant-id 为 1
		                        //     },
		                        //     success: (res) => {
		                        //         if (res.data) {
		                        //             console.log('登录成功，用户信息:',res.data);
		                        //             uni.setStorageSync('userToken',res.data.token); // 保存用户 token
		                        //             this.showLoginModal = false; // 关闭登录弹窗
		                        //         }
		                        //     },
		                        //     fail: (err) => {
		                        //         console.error('请求失败',err);
		                        //     }
		                        // });
		                    }
		                }
		            });
		        } else if (!this.agreeTerms) {
		            uni.showToast({
		                title: "请先同意用户协议和隐私协议",
		                icon: "none",
		            });
		        } else {
		            console.error('获取手机号失败或用户拒绝授权');
		        }
		    },
		
		    // 获取用户的手机号码
		    getPhoneNumber(e) {
		        if (e.detail.errMsg === "getPhoneNumber:ok") {
		            // 获取 phoneCode，用于服务器解密
		            let phoneCode = e.detail.code; // 通过 getPhoneNumber 获取的手机号码 code
		
		            // 将 phoneCode 发送到后端
		            uni.request({
		                url: cfg.url + '/member/auth/weixin-mini-app-login',
		                method: 'POST',
		                data: {
		                    phoneCode: phoneCode,
		                    loginCode: this.loginCode, // 之前通过 wx.login 获取的 loginCode
		                    state: 'any_custom_state_value' // 根据需求设置您的 state 值
		                },
		                success: (res) => {
		                    if (res.data && res.data.phoneNumber) {
		                        console.log('用户手机号:',res.data.phoneNumber);
		                        // 后续的逻辑，比如保存手机号或进行绑定
		                    }
		                },
		                fail: (err) => {
		                    console.error('请求失败',err);
		                },
		            });
		        } else {
		            console.error('用户拒绝授权获取手机号');
		        }
		    },
		    oneClickLogin() {
		        uni.navigateTo({
		            url: '/subPackage1/userInfoSelection/userInfoSelection' // 路径根据实际页面位置调整
		        });
		    },
		    checkLoginStatus() {
		        const userToken = uni.getStorageSync('userToken');
		        if (!userToken) {
		            this.showLoginModal = true; // 未登录显示弹窗
		        }
		    },
		    closeLoginModal() {
		        this.showLoginModal = false;
		    },
		    handleViewMoreClick() {
		        const userToken = uni.getStorageSync('userToken');
		        // this.navigateToMarriageList();
		        if (userToken) {
		            // 用户已登录，跳转到助婚列表页面
		            this.navigateToMarriageList();
		        } else {
		            // 用户未登录，显示登录弹窗
		            this.showLoginModal = true;
		        }
		    },
		    phoneLogin() {
		        uni.navigateTo({
		            url: '/subPackage1/phoneLogin/phoneLogin' // 路径根据实际页面位置调整
		        });
		    },
		    navigateToMarriageList() {
		        uni.navigateTo({
		            url: '/subPackage1/marriageList/marriageList' // 路径根据实际页面位置调整
		        });
		    },
	},
}
</script>

<style scoped>
	.login-modal {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0, 0, 0.6);
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    z-index: 1000;
	}
	
	.login-modal-content {
	    width: 80%;
	    padding: 20rpx;
	    background-color: #fff;
	    border-radius: 20rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	
	.login-image {
	    width: 100%;
	    height: 200rpx;
	    border-radius: 20rpx 20rpx 0 0;
	    margin-bottom: 20rpx;
	}
	
	.login-text {
	    text-align: center;
	    font-size: 28rpx;
	    color: #333;
	    margin-bottom: 20rpx;
	}
	
	.login-text text {
	    display: block;
	    font-weight: bold;
	}
	
	.login-button {
	    width: 80%;
	    height: 60rpx;
	    background-color: #a55fee;
	    color: #fff;
	    font-size: 28rpx;
	    text-align: center;
	    line-height: 60rpx;
	    border-radius: 30rpx;
	    margin: 10rpx 0;
	}
	
	.other-login {
	    color: #a55fee;
	    font-size: 26rpx;
	    margin: 10rpx 0;
	}
	
	.agreement {
	    display: flex;
	    align-items: center;
	    font-size: 24rpx;
	    color: #666;
	    margin: 10rpx 0;
	}
	
	.agreement-checkbox {
	    margin-right: 5rpx;
	}
	
	.agreement-link {
	    color: #a55fee;
	    margin: 0 5rpx;
	}
	
	.later-option {
	    color: #999;
	    font-size: 26rpx;
	    margin-top: 20rpx;
	    text-decoration: underline;
	}
</style>